<template>
  <div class="qisWrapper">
    <div class="tabsWrapper">
      <a-tabs default-active-key="1" v-model="selectTabKey" @change="tabCallBack(selectTabKey)">
        <a-tab-pane key="1">
          <span class="tab-title" slot="tab">{{$t('qualityInfoSys.newStatisticAnalysis')}}</span>
        </a-tab-pane>
        <a-tab-pane key="2">
           <span class="tab-title" slot="tab">{{$t('qualityInfoSys.listOfQuestions')}}</span>
        </a-tab-pane>
        <a-tab-pane key="3" v-if="isShowSjlq">
          <span class="tab-title" slot="tab">{{$t('qualityInfoSys.designMinefield')}}</span>
        </a-tab-pane>
        <a-tab-pane key="4" v-if="isShowWpqd">
          <span class="tab-title" slot="tab">{{$t('qualityInfoSys.initialItemList')}}</span>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="contentWrapper">
      <div v-if="selectTabKey == '1'">
        <iframe id="name1" frameborder="1"  :src="anaysUrl" v-if="anaysUrl"></iframe>
        <a-empty v-else description="暂无数据" class="nodata"/>
      </div>
      <div v-if="selectTabKey == '2'">
        <iframe id="name2" frameborder="1"  :src="qustiotnUrl" v-if="qustiotnUrl"></iframe>
        <a-empty v-else description="暂无数据" class="nodata"/>
      </div>
      <div v-if="selectTabKey == '3'">
        <iframe id="name3" frameborder="1"  :src="sjlqUrl" v-if="sjlqUrl"></iframe>
        <a-empty v-else description="暂无数据" class="nodata"/>
      </div>
      <div v-if="selectTabKey == '4'">
        <iframe id="name4" frameborder="1"  :src="thingListUrl" v-if="thingListUrl"></iframe>
        <a-empty v-else description="暂无数据" class="nodata"/>
      </div>
    </div>
  </div>
</template>
<script>
import { getQisUrl } from'@/api/qualityInfoSystem.js'
let userinfo = JSON.parse(sessionStorage.getItem('userInfo'))
let userId = userinfo.loginName
export default {
  data() {
    return {
      selectTabKey:'1',
      oid: "",
      anaysUrl: "",
      qustiotnUrl: "",
      sjlqUrl: "",
      thingListUrl: "",
      clientWidth: 1400,
      clientHeight: 400,
      isShowSjlq: false, //是否展示设计雷区tab
      isShowWpqd: false, //是否展示物品清单tab
    }
  },
  created() {
    this.oid = sessionStorage.getItem('oid')
  },
  mounted() {
    this.clientWidth = document.querySelector(".qisWrapper").offsetWidth - 40 
    this.clientHeight = document.querySelector(".qisWrapper").offsetHeight - 100 
    const arr = [1,2,3,4],_this = this
    arr.forEach(function(item) {
      _this.getQisUrlAddress(item)
    })
    // this.getQisUrlAddress(1)
  },
  methods: {
    tabCallBack(val) {
      this.selectTabKey  = val
    },
    getQisUrlAddress(selectTabKey) {
      const info = {
        userId,
        oid: `OR:com.pisx.pmgt.project.PIProject:${this.oid}`,
        key: Number(selectTabKey)
      }
      getQisUrl(info).then( res => {
        if( res && res.status == 200 ) {
          if( res.data.success == true || res.data.success == 'true' ) {
            if(selectTabKey == 1) {
              this.$set(this,"anaysUrl",res.data.message)
            } else if (selectTabKey == 2) {
              this.$set(this,"qustiotnUrl",res.data.message)
            } else if (selectTabKey == 3) {
              this.isShowSjlq = res.data.message ? true : false
              this.$set(this,"sjlqUrl",res.data.message)
            } else if (selectTabKey == 4) {
              this.isShowWpqd = res.data.message ? true : false
              this.$set(this,"thingListUrl",res.data.message)
            }
          } else {
            this.$message.error(res.data.message || "请求数据失败")
          }
        } else {
          this.$message.error(res.data.message || "请求数据失败")
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .qisWrapper{
    padding: 0 20px;
    padding-top: 10px;
    background-color: #fff;
    height: 98%;
    .tabsWrapper{
      .tab-title {
        width: 100%;
        height: 30px;
        //background-color: green;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .contentWrapper {
      height: calc(100% - 80px);
      overflow: scroll;
      div {
        width: 99%;
        height: 100%;
        iframe {
          height: 800px;
          width: 100%;
          overflow: scroll;
        }
      }
    }
    
  }
</style>